<script setup>
import { onMounted, ref, getCurrentInstance } from 'vue'
import AddDiary from '../components/article/AddDiary.vue'
import DiaryItem from '../components/article/DiaryItem.vue'
import request from '../api/index'
const proxy = getCurrentInstance()?.proxy
const titleFunction = [
  {
    type: 'search',
    placeholder: '请输入标题',
  }
]
const url = ref({
  get:'/admin/diary/searchDiary',
})
const params = ref({
  diaryId: undefined,
  keyword: undefined,
})
const diaryList = ref([])
const pagination = ref({
    currentPage: 1,
    pageSize: 5,
    totalCount: 0,
    totalPages: 1
})
onMounted(() => { 
  getDataList()
})

const getDataList = body => {
  request.post(url.value.get, {
    page: pagination.value.currentPage,
    pageSize: pagination.value.pageSize,
    ...params.value,
    ...body
  }).then(res => {
    if (res.data.status ==='success') {
      diaryList.value = res.data.data
      pagination.value = res.data.pagination
    } else {
      diaryList.value = []
      if (res.data.errCode >= 500 ) {
        proxy.$message({ type: 'error', duration: 1000,  message: res.data.message })
      }
    }
  })
}

const sizeChange = (page) => {
  pagination.value.currentPage = page
  getDataList()
}

</script>

<template>
<div class="diary-view">
  <yk-space dir="vertical" :size="24" style="width:100%">
    <top-title title="随笔随记" :titleFunction="titleFunction"/>
    <yk-space :size="24" style="width:100%">
      <yk-space dir="vertical" :size="24" style="width:100%">
        <yk-scrollbar ref="scrollbar" height="650px" v-if="diaryList.length > 0">
          <yk-space class="diary-view-content" :size="24" dir="vertical" style="width:1000px">
            <diary-item v-for="(item, index) in diaryList" :key="item.Id" :diaryInfo="item" @updateDate="getDataList()"/>
          </yk-space>
        </yk-scrollbar>
        <yk-pagination v-if="diaryList.length > 0" @change="sizeChange" style="margin-top: 12px;width:100%;justify-content: flex-end;" :default-page-size="pagination.pageSize" v-model:current="pagination.currentPage" :total="pagination.totalCount"/>
        <yk-empty v-else style="width:100%;">
        <template #description>
          暂无日记
        </template>
      </yk-empty>
      </yk-space>
      <div class="addDiary">
        <add-diary />
      </div>
    </yk-space>
  </yk-space>
</div>
</template>

<style scoped lang='less'>
.diary-view {
  padding: 32px 32px 32px 232px;
  width: 100%;
  background-color: @bg-color-m;

  .addDiary {
    width:100%;
  }
}
</style>